<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div @click="handleDivClick"
        :class="{activated:isActivated}"
        >hello world</div>
        <div>{{fullName}}
            {{age}}
        </div>
    </div>

    <script>
        //MVVM
        var app = new Vue({
       
            el: '#app',
            data: {

                firstName: "hongfei",
                lastName: "tan",
                isActivated: false,
                age: 18
            },
            //计算属性
            computed: {
                fullName: {
                  get:  function() {
                        return this.firstName + " * " + this.lastName
                    },
                    set:function(value){
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            },
            // watch: {
            //     firstName: function () {
            //         this.fullName = this.firstName + " " + this.lastName;
            //     },
            //     lastName: function () {
            //         this.fullName = this.firstName + " " + this.lastName;
            //     }
            // },
            methods: {
                // fullName: function () {
                //     // alert(this.inputValue)
                //     this.list.push(this.inputValue)
                //     this.inputValue = ''
                // },
                handleDivClick: function () {
                    console.log("计算了一次")
                    this.isActivated = true;
                },
               

            }
        })
    </script>
</body>

</html>